<template>
  <div class="container">
    <div class="stati">
      <div class="left">
        <div class="banner">
          <img
            class="imgleft"
            src="http://www-wms-java.itheima.net/img/dashboard-banner-left@2x.5afd2949.png"
          />
          <img
            class="imgright"
            src="http://www-wms-java.itheima.net/img/dashboard-banner-right@2x.28195570.png"
          />
          <img
            class="user-img"
            src="http://www-wms-java.itheima.net/img/avatar@2x.4f4a758f.png"
          />
          <div class="user-title">仓储管理员</div>
          <div class="subject-title active">我不是为了输赢，我就是认真！</div>
          <div class="subject-author active">—— 罗永浩</div>
          <div class="site">
            <p>北京总仓</p>
          </div>
        </div>
        <div class="backlog">
          <div class="subject">待办信息</div>
          <el-row style="margin-top: 20px">
            <el-col :span="8" style="padding-left: 15px; padding-right: 15px">
              <router-link to="/managestoragein/listin">
                <div class="backlog-item">
                  <div class="icon">
                    <i class="iconfont icon-zhcc_ruku"></i>
                  </div>
                  <div class="title">入库单</div>
                  <div class="bottom">
                    <span class="spanlabel">新增</span>
                    <span class="spanValue">5</span>
                    <span class="spanlabel">待审核</span>
                    <span class="spanValue" style="color: rgb(0, 118, 255)"
                      >5</span
                    >
                  </div>
                </div>
              </router-link>
            </el-col>
            <el-col :span="8" style="padding-left: 15px; padding-right: 15px">
              <router-link to="/managestorageout/listout">
                <div class="backlog-item">
                  <div class="icon" style="background: rgb(255, 178, 0)">
                    <i class="iconfont icon-zhcc_chuku"></i>
                  </div>
                  <div class="title">出库单</div>
                  <div class="bottom">
                    <span class="spanlabel">新增</span>
                    <span class="spanValue">9</span>
                    <span class="spanlabel">待审核</span>
                    <span class="spanValue" style="color: rgb(255, 178, 0)"
                      >9</span
                    >
                  </div>
                </div></router-link
              >
            </el-col>
            <el-col :span="8" style="padding-left: 15px; padding-right: 15px">
              <router-link to="/managestorage/list">
                <div class="backlog-item">
                  <div class="icon" style="background: rgb(255, 113, 0)">
                    <i class="iconfont icon-pandian"></i>
                  </div>
                  <div class="title">盘点单</div>
                  <div class="bottom">
                    <span class="spanlabel">新增</span>
                    <span class="spanValue">2</span>
                    <span class="spanlabel">待审核</span>
                    <span class="spanValue" style="color: rgb(255, 113, 0)"
                      >2</span
                    >
                  </div>
                </div></router-link
              >
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="rigth">
        <div class="notes">
          <div class="subject">通知/公告</div>
          <div class="item">
            <div class="hr"></div>
            <div class="title">紧急盘点通知</div>
            <div class="time">2020.12.30 18:23:14</div>
          </div>
          <div class="item">
            <div class="hr"></div>
            <div class="title">紧急盘点通知</div>
            <div class="time">2020.12.30 18:23:14</div>
          </div>
          <div class="item">
            <div class="hr"></div>
            <div class="title">紧急盘点通知</div>
            <div class="time">2020.12.30 18:23:14</div>
          </div>
          <div class="item">
            <div class="hr"></div>
            <div class="title">紧急盘点通知</div>
            <div class="time">2020.12.30 18:23:14</div>
          </div>
          <div class="item">
            <div class="hr"></div>
            <div class="title">紧急盘点通知</div>
            <div class="time">2020.12.30 18:23:14</div>
          </div>
        </div>
      </div>
    </div>
    <div class="tasks">
      <div class="subject">任务导航</div>
      <div class="item-list">
        <el-row style="margin-left: -15px; margin-right: -15px">
          <el-col :span="5" style="padding-left: 15px; padding-right: 15px">
            <router-link to="/managestoragein/taskreceive">
              <div class="tasks-item">
                <div class="icon">
                  <i class="iconfont icon-daishouhuo"></i>
                </div>
                <div class="title">收货任务</div>
              </div>
            </router-link>
          </el-col>
          <el-col :span="5" style="padding-left: 15px; padding-right: 15px">
            <router-link to="/managestoragein/taskadd">
              <div class="tasks-item">
                <div class="icon" style="background: rgb(82, 212, 243)">
                  <i class="iconfont icon-shangjia"></i>
                </div>
                <div class="title">上架任务</div>
              </div>
            </router-link>
          </el-col>
          <el-col :span="5" style="padding-left: 15px; padding-right: 15px">
            <router-link to="/managestorage/listtask">
              <div class="tasks-item">
                <div class="icon" style="background: rgb(255, 113, 0)">
                  <i class="iconfont icon-jisuanqi"></i>
                </div>
                <div class="title">盘点任务</div>
              </div>
            </router-link>
          </el-col>
          <el-col :span="5" style="padding-left: 15px; padding-right: 15px">
            <router-link to="/managestorageout/taskpickingout">
              <div class="tasks-item">
                <div class="icon" style="background: rgb(255, 96, 158)">
                  <i class="iconfont icon-jianhuo"></i>
                </div>
                <div class="title">拣货任务</div>
              </div>
            </router-link>
          </el-col>
          <el-col :span="5" style="padding-left: 15px; padding-right: 15px">
            <router-link to="/managestorageout/tasktransfer">
              <div class="tasks-item">
                <div class="icon" style="background: rgb(255, 178, 0)">
                  <i class="iconfont icon-jiaojie"></i>
                </div>
                <div class="title">交接任务</div>
              </div>
            </router-link>
          </el-col>
        </el-row>
      </div>
    </div>
    <InoutCharts />
    <div class="libs">
      <UserChart />
      <LibsCharts />
    </div>
  </div>
</template>

<script>
import LibsCharts from './components/LibsCharts.vue'
import UserChart from './components/UserChart.vue'
import InoutCharts from './components/InoutCharts.vue'
export default {
  name: 'DashBoard',
  components: { InoutCharts, UserChart, LibsCharts }
}
</script>

<style lang="scss" scoped>

</style>
